body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    /*display: flex; 这一行导致历史记录跟表单在一行展示*/
    /*justify-content: center;
    align-items: center;*/
    height: 100vh;
    background-color: #f5f5f5;
}

label {
    /*padding-right: 100px;*/ /* 添加右侧内边距 */
    margin-left: 10px;
}

.textarea1 {
    /*padding-right: 100px;*/ /* 添加右侧内边距 */
    /* margin-left: 10px; */

    width: calc(100vw - 40px); /* 减去左边距的宽度 */
    height: 15vh; /* 设置高度为视口高度 */
    margin: 0; /* 移除其他外边距 */
    margin-left: 10px; /* 保留左边距 */
    margin-right: 30px; /* 保留左边距 */
    box-sizing: border-box; /* 确保内边距包含在元素的总尺寸内 */
    background-color: #dad5d5 !important; /* 设置背景颜色，使用 !important 提高优先级 */
    color: #000000 !important; /* 设置字体颜色为黑色 */
}

input{
    /*padding-right: 100px;*/ /* 添加右侧内边距 */
    margin-left: 10px;
}

.chat-container {
    /* width: 100%;
    max-width: 1500px;
    height: 80vh;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    display: flex;
    flex-direction: column; */

    width: 100vw; /* 设置宽度为视口宽度 */
    height: 70vh; /* 设置高度为视口高度 */
    background-color: #fff;
    padding: 20px; /* 可以根据需要调整内边距 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* 确保padding包含在元素的总尺寸内 */
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.chat-history {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fafafa;
    resize: both; /* Allow manual resizing */
}

.chat-record {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
}

.timestamp {
    text-align: left; /* Ensure timestamps are aligned to the left */
    color: #666;
    font-size: 12px;
    margin-bottom: 5px;
}

.message {
    margin: 0;
    padding: 10px;
    background-color: #e0e0e0;
    border-radius: 4px;
    white-space: pre-wrap; /* 保留换行符和空白 */
}

.message strong {
    display: block;
    margin-bottom: 5px;
    color: #333;
}

.custom-button {
    color: rgb(255, 255, 255); /* 文字颜色 */
    background-color: rgb(50, 183, 245); /* 背景颜色 */
    border: none; /* 去掉边框 */
    padding: 10px 20px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 鼠标悬停时的指针样式 */
}

.custom-button:hover {
    background-color: rgb(30, 163, 225); /* 悬停时的背景颜色 */
}

/* 基本样式 */
.styled-select {
    width: 200px; /* 设置宽度 */
    padding: 10px; /* 设置内边距 */
    font-size: 16px; /* 设置字体大小 */
    color: #333; /* 设置文字颜色 */
    background-color: #f9f9f9; /* 设置背景颜色 */
    border: 1px solid #ccc; /* 设置边框 */
    border-radius: 5px; /* 设置圆角 */
    appearance: none; /* 移除默认下拉箭头样式 */
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none; /* 去掉聚焦时的外边框 */
    cursor: pointer; /* 鼠标悬停时显示为指针 */
}

/* 添加下拉箭头 */
.styled-select::after {
    content: '\25BC'; /* Unicode字符表示向下箭头 */
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none; /* 使箭头不可点击 */
}

/* 添加下拉箭头的父元素 */
.select-container {
    position: relative;
    display: inline-block;
}

/* 悬停效果 */
.styled-select:hover {
    background-color: #e6e6e6; /* 设置悬停时的背景颜色 */
}

/* 聚焦效果 */
.styled-select:focus {
    border-color: #666; /* 设置聚焦时的边框颜色 */
}
